<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片盒子 -->
    <el-card>
      <!-- 头部提示 -->
      <el-alert title="只能选择三级分类" type="warning" show-icon :closable="false"></el-alert>
      <!-- 级联选择器 -->
      <el-row class="params-row">
        <el-col>
          <span>选择商品分类：</span>
          <el-cascader
            ref="cascader"
            expand-trigger="hover"
            clearable
            v-model="selectitem"
            :options="catelist"
            :props="cateprops"
            @change="handleChange"
            change-on-select>
          </el-cascader>
        </el-col>
      </el-row>
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 添加商品参数  动态 -->
        <el-button type="primary" :disabled="isdisabled" @click="addparams=true">添加参数</el-button>
        <el-tab-pane label="动态参数" name="only">
          <el-table :data="activeparamsList" border> 
            <el-table-column type="expand">
              <template slot-scope="scope">
               <el-tag @close="removeTag(index,scope.row)" closable v-for="(item,index) in scope.row.attr_vals" :key="index">{{item}}</el-tag>
               <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)">
               </el-input>
                <el-button class="button-new-tag" v-else size="small" @click="inputVisible=true">+ New Tag</el-button>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#" width="180"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" @click="selectParams(scope.row.cat_id,scope.row.attr_id)" type="primary" icon="el-icon-edit">修改</el-button>
                <el-button size="mini" @click="removeItem(scope.row.attr_id)" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 添加商品属性  静态 -->
        <el-tab-pane label="静态属性" name="many">
           <el-table :data="disactiveparamsList" border> 
            <el-table-column type="expand">
              <template slot-scope="scope">
               <el-tag @close="removeTag(index,scope.row)" closable v-for="(item,index) in scope.row.attr_vals" :key="index">{{item}}</el-tag>
               <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)">
               </el-input>
                <el-button class="button-new-tag" v-else size="small" @click="inputVisible=true">+ New Tag</el-button>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#" width="180"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" @click="selectParams(scope.row.cat_id,scope.row.attr_id)" type="primary" icon="el-icon-edit">修改</el-button>
                <el-button size="mini" @click="removeItem(scope.row.attr_id)" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加参数对话框 -->
    <el-dialog :title="'添加'+paramstitle" :visible.sync="addparams" width="50%" @close="changeItem">
      <el-form :model="paramsForm" :rules="rules" ref="paramsForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="paramsForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addItem">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改参数对话框 -->
    <el-dialog :title="'修改'+paramstitle" :visible.sync="fixparams" width="50%" @close="changeItem">
      <el-form :model="paramsForm" :rules="rules" ref="paramsForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="paramsForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="fixItem">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {goodscate,getcatelist,addParams,getParams,setParams,delParams,setnewParams} from "@/api/login"
export default {
  data(){
    return{
      query:{
        type:3,
        pagenum:1,
        pagesize:5
      },
      // 分类数据
      catelist:[],
      // 级联选择框的数据配置
      cateprops:{
        value:"cat_id",
        label:"cat_name",
        chlidren:"children"
      },
      // 选中分类的id数据
      selectitem:[],
      // 选项卡被选中的名称
      activeName:"only",
      // 动态参数数组
      activeparamsList:[],
      // 静态参数数组
      disactiveparamsList:[],
      // 添加参数对话框
      addparams:false,
      // 修改参数对话框
      fixparams:false,
      // 添加参数对象
      paramsForm:{
        attr_name:""
      },
      // 要修改参数的属性id
      arrId:null,
      // 添加参数验证规则
      rules:{
        attr_name: [
          { required: true, message: '请输入参数名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
      },
      // 输入框与添加按钮切换
      inputVisible:false,
      // 输入的值
      inputValue:""
    }
  },
  created(){
    this.load_data()
  },
  computed:{
    // 如果选择的是三级分类按钮才为可用状态
    isdisabled(){
      if(this.selectitem.length!=3){
        return true
      }else{
        return false
      }
    },
    // 分类id
    cateid(){
      if(this.selectitem.length==3){
        // console.log(this.selectitem[2])
        return this.selectitem[2]
      }
    },
    // 添加参数的动态标题
    paramstitle(){
      if(this.activeName=="only"){
        return "动态参数"
      }else{
         return "静态参数"
      }
    }

  },
  methods:{
    load_data(){
      const{query}=this
      goodscate({type:query.type,pagenum:query.pagenum,pagesize:query.pagesize}).then(({data})=>{
        console.log(data)
        this.catelist=data.data.result
      })
    },
    // 选中项的id数组(如果选中的不是三级栏目，选中项的数组就为空)
    handleChange(){
      console.log(this.selectitem)
      if(this.selectitem.length!=3){
        this.selectitem=[]
        this.activeparamsList=[]
        this.disactiveparamsList=[]
      }else{
        // 获取参数数据
        getcatelist('categories/'+ this.cateid +'/attributes',{sel:this.activeName}).then(({data})=>{
          console.log(data.data)
          data.data.forEach(item => {
            item.attr_vals = item.attr_vals? item.attr_vals.split(" ") : []
          });
          if(this.activeName=="only"){
            this.activeparamsList=data.data
          }else if(this.activeName=="many"){
            this.disactiveparamsList=data.data
          }
        })
      }
      // 选中项后关闭级联选择器
      this.$refs.cascader.dropDownVisible = false
    },
    // 选项卡点击事件
    handleClick(){
      console.log(this.activeName)
      if(this.selectitem.length==3){
        this.handleChange()
      }
    },
    // 关闭对话框后重置表单
    changeItem() {
      this.$refs.paramsForm.resetFields();
    },
    // 添加参数
    addItem(){
      const{paramsForm,activeName}=this
      addParams({attr_name:paramsForm.attr_name,attr_sel:activeName},'categories/'+this.cateid+'/attributes').then(res=>{
        console.log(res)
        this.handleChange()
        this.addparams=false
      })
    },
    // 根据id获取参数
    selectParams(catId,arrId){
      console.log(catId,arrId)
      const{activeName}=this
      this.fixparams=true
      this.arrId=arrId
      getParams({attr_sel:activeName},'categories/'+this.cateid+'/attributes/'+arrId+'').then(({data})=>{
        console.log(data)
        this.paramsForm.attr_name=data.data.attr_name
      })
    },
    // 提交修改参数
    async fixItem(){
      const{activeName,paramsForm,$api:{Success}}=this
      const {data} =await setParams({attr_name:paramsForm.attr_name,attr_sel:activeName},'categories/'+this.cateid+'/attributes/'+this.arrId+'')
      console.log(data)
      if(data.meta.status==200){
        Success(data.meta.msg)
        this.fixparams=false
        this.handleChange()
      }
    },
    // 删除参数
    async removeItem(attrId){
      const res = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(res)
      if(res=="confirm"){
        delParams('categories/'+this.cateid+'/attributes/'+attrId+'').then(({data})=>{
          console.log(data)
          if(data.meta.status==200){
            this.$api.Success(data.meta.msg)
            this.handleChange()
          }
        })
      }
       
      
    },
    //删除参数下的属性值 1
    removeTag(index,row){
      row.attr_vals.splice(index,1)
      this.deleItem(row)
    },
    // 删除参数下的属性值 2
    deleItem(row){
      setParams({attr_sel:row.attr_sel,attr_name:row.attr_name,attr_vals:row.attr_vals.join(" ")},'categories/'+this.cateid+'/attributes/'+row.attr_id+'').then(res=>{
        console.log(res)
      })
    },
    // 添加按钮与输入框的切换
    handleInputConfirm(data) {
      console.log(data)
      var inputValue=this.inputValue
      if (inputValue) {
        data.attr_vals.push(inputValue.trim());
        setParams({attr_sel:data.attr_sel,attr_name:data.attr_name,attr_vals:data.attr_vals.join(" ")},'categories/'+this.cateid+'/attributes/'+data.attr_id+'').then(res=>{
          console.log(res)
        })
      }
      this.inputVisible = false;
      this.inputValue=""
    }
  }
}
</script>
<style Lang="less" scoped>
.params-row{
  margin: 20px 0;
  display: flex;
  align-items: center;
}
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>